import { useState, useEffect } from "react";
import style from "./index.module.less";

const Index = (props: { restTime: number }) => {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  let timer: any;
  const [countDown, setCountDown] = useState<{
    [key: string]: string | number;
  }>({
    hour: "00",
    minute: "00",
    second: "00",
  });
  const countFun = (time: number) => {
    timer = setInterval(() => {
      //防止倒计时出现负数
      if (time > 1) {
        time -= 1;
        const hour = Math.floor(time / 3600);
        const minute = Math.floor((time - hour * 3600) / 60);
        const second = time - hour * 3600 - minute * 60;
        setCountDown({
          hour: hour < 10 ? "0" + hour : hour,
          minute: minute < 10 ? "0" + minute : minute,
          second: second < 10 ? "0" + second : second,
        });
      } else {
        clearInterval(timer);
      }
    }, 1000);
  };
  useEffect(() => {
    if (props.restTime) {
      countFun(props.restTime);
    }
    return () => {
      clearInterval(timer);
    };
  }, []);
  return (
    <div className={style.countDown}>
      <span>{countDown.hour}</span>
      <b> : </b>
      <span>{countDown.minute}</span>
      <b> : </b>
      <span>{countDown.second}</span>
    </div>
  );
};
export default Index;
